<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar :title="$route.name" left-arrow @click-left="$router.back()"/>
    <div id="search">
      <!-- 上边 -->
      <div class="top">
        <van-icon name="location-o" color="#fff" size="20px"/>
        <h2>
          <img :src="require('../assets/images/logo/white.png')" alt>
        </h2>
        <input type="search" class="iconfont" placeholder="请输入关键字">
        <van-icon name="shop-o" color="#fff" size="20px"/>
      </div>
      <div class="bottom">
        <!-- 首页分类导航 -->
        <div>
          <span @click="goCate()" v-for="item in catelist" :key="item.id">{{item.catename}}</span>
        </div>
        <p>
          <i>分类</i>
        </p>
      </div>
    </div>
    <!-- 轮播图 -->
    <van-swipe class="banner" :autoplay="2000">
      <van-swipe-item v-for="item in bannerlist" :key="item.id">
        <img class="imglb" :src="item.img">
      </van-swipe-item>
    </van-swipe>
    <!-- 静态格子 -->
    <van-grid :column-num="5" :border="false">
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/seckill.png')"/>
        <p class="navtitle">限时秒杀</p>
      </van-grid-item>
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/top.png')"/>
        <p class="navtitle">畅销商品</p>
      </van-grid-item>
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/brand.png')"/>
        <p class="navtitle">品质大牌</p>
      </van-grid-item>
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/selfsupport.png')"/>
        <p class="navtitle">小U自营</p>
      </van-grid-item>
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/integral.png')"/>
        <p class="navtitle">积分商城</p>
      </van-grid-item>
    </van-grid>
    <!-- 秒杀 -->
    <div id="seckill">
      <div class="left" @click="goSeckill">
        <p class="p1">
          限时秒杀
          <span>
            查看更多
            <van-icon name="arrow"/>
          </span>
        </p>
        <p class="p2">每天0点场，好货秒不停</p>
        <p class="p3">
          <van-count-down :time="time">
            <template #default="timeData">
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
        </p>
      </div>
      <div class="top">
        <p class="p1">品牌上新</p>
        <p class="p2">九点整，抢大牌</p>
        <p class="p3">
          疯抢红包
          <van-icon name="arrow"/>
        </p>
      </div>
      <div class="bottom">
        <p class="p1">日用好物</p>
        <p class="p2">愿君多采撷</p>
        <p class="p3">
          塞满奖券
          <van-icon name="arrow"/>
        </p>
      </div>
    </div>
    <!-- 图片切换 -->
    <van-tabs class="goods" type="card">
      <van-tab title="双11尖货预购">
        <van-image
          class="img"
          width="80px"
          height="80px"
          :src="require('../assets/images/home/01.png')"
        />
        <van-image
          class="img"
          width="80px"
          height="80px"
          :src="require('../assets/images/home/01.png')"
        />
        <van-image
          class="img"
          width="80px"
          height="80px"
          :src="require('../assets/images/home/01.png')"
        />
        <van-image
          class="img"
          width="80px"
          height="80px"
          :src="require('../assets/images/home/01.png')"
        />
      </van-tab>
      <van-tab title="畅购全球">
        <van-image
          class="img"
          width="80px"
          height="80px"
          :src="require('../assets/images/home/02.png')"
        />
        <van-image
          class="img"
          width="80px"
          height="80px"
          :src="require('../assets/images/home/02.png')"
        />
        <van-image
          class="img"
          width="80px"
          height="80px"
          :src="require('../assets/images/home/02.png')"
        />
        <van-image
          class="img"
          width="80px"
          height="80px"
          :src="require('../assets/images/home/02.png')"
        />
      </van-tab>
    </van-tabs>
    <!-- 首页商品切换 -->
    <van-tabs class="goods" type="card">
      <van-tab title="热门推荐">
        <van-card
          @click="goDetail(item.id)"
          v-for="item in hotlist"
          :key="item.id"
          num="1"
          :price="item.price | toPrice"
          desc="描述信息"
          :title="item.goodsname"
          :thumb="item.img"
          :origin-price="item.market_price"
        />
      </van-tab>
      <van-tab title="上新推荐">
        <van-card
          @click="goDetail(item.id)"
          v-for="item in newlist"
          :key="item.id"
          num="1"
          :price="item.price | toPrice"
          desc="描述信息"
          :title="item.goodsname"
          :thumb="item.img"
        />
      </van-tab>
      <van-tab title="所有商品">
        <van-card
          @click="goDetail(item.id)"
          v-for="item in goodslist"
          :key="item.id"
          num="1"
          :price="item.price | toPrice"
          desc="描述信息"
          :title="item.goodsname"
          :thumb="item.img"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
//引入封装好的接口
import { getBanner, homeGoods, getCate, getSeckill } from "../request/api";
export default {
  data() {
    return {
      bannerlist: [],
      hotlist: [],
      newlist: [],
      goodslist: [],
      catelist: [],
      time: 30 * 60 * 60 * 1000,
      seckill: [],
    };
  },
  mounted() {
    //组件一加载就调用轮播图接口
    getBanner().then(res => {
      // console.log(res, "响应");
      if (res.code == 200) {
        this.bannerlist = res.list;
      }
    });
    //组件一加载就调用首页商品列表
    homeGoods().then(res => {
      // console.log(res, "首页商品列表");
      if (res.code == 200) {
        this.hotlist = res.list[0].content;
        this.newlist = res.list[1].content;
        this.goodslist = res.list[2].content;
      }
    });
    //组件一加载就调用分类接口
    getCate().then(res => {
      // console.log(res, "分类列表");
      if (res.code == 200) {
        this.catelist = res.list;
      }
    });
    //组件一加载就调用秒杀接口
    getSeckill().then(res => {
      console.log(res, "秒杀");
      if (res.code == 200) {
        this.seckill = res.list;
      }
    });
  },
  methods: {
    //跳转商品详情
    goDetail(id) {
      this.$router.push("/detail?id=" + id);
    },
    //跳转分类列表
    goCate() {
      console.log("去分类");
      this.$router.push("/cate");
    },
    //跳转秒杀
    goSeckill(){
      console.log("去秒杀");
      this.$router.push("/seckill")
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.van-card{
  width: 90%;
  margin: 10px auto;
}
.imglb {
  width: 100%;
  height: 200px;
  border-radius: 10px;
}
.banner {
  width: 95%;
  margin: 0 auto;
  box-sizing: border-box;
}
.navtitle {
  font-size: 12px;
}
.goods {
  margin-bottom: 80px;
  height: 70px;
}
.van-nav-bar {
  background: #ff6040;
  height: 50px;
  color: #fff;
}
.img {
  margin-left: 10px;
  margin-top: 20px;
}
#search {
  height: 80px;
  background: linear-gradient(#ff6040, #ff8a80);
  overflow: hidden;
}
#search .top {
  height: 32px;
  padding: 2px 2px 0 2px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 5px;
  box-sizing: border-box;
}
#search .top img {
  height: 24px;
}
#search .top input {
  width: 150px;
  height: 32px;
  background: #ffffff;
  border: 2px solid #e6e6e6;
  box-sizing: border-box;
  padding-left: 10px;
  line-height: 5px;
}
#search .top::placeholder {
  color: #999999;
}
/* 底部 */
#search .bottom {
  font-size: 24px;
  color: #fff;
  line-height: 16px;
  margin-top: 8px;
}
#search .bottom div {
  width: 80%;
  display: flex;
  float: left;
}
#search .bottom div span {
  flex: 1;
  text-align: center;
  font-size: 16px;
  margin-top: 5px;
}
#search .bottom p {
  float: right;
  margin-right: 8px;
}
#search .bottom p i {
  margin-left: 1px;
  font-size: 16px;
}
#seckill {
  box-sizing: border-box;
  padding: 10px;
  height: 200px;
  background: #f2f2f2;
  box-sizing: border-box;
  width: 100%;
}
#seckill .left {
  width: 52%;
  height: 180px;
  background: url(../assets/images/background/big.png) no-repeat right bottom;
  background-color: #e6eadb;
  float: left;
}
#seckill .left .p1 {
  font-size: 16px;
  color: #85a642;
  font-weight: bold;
  margin: 5px 0 0 5px;
}
#seckill .left .p1 span {
  font-size: 14px;
  color: #333333;
  margin-left: 25px;
  font-weight: normal;
}
#seckill .left .p2 {
  font-size: 16px;
  color: #b1cc7a;
  margin: 10px 0 0 5px;
}
#seckill .left .p3 {
  color: #85a642;
  font-size: 16px;
  display: flex;
  margin: 20px 0 0 5px;
}
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #85a642;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #85a642;
}
#seckill .top,
#seckill .bottom {
  width: 45%;
  height: 90px;
  float: left;
  margin-left: 10px;
  padding: 5px;
  box-sizing: border-box;
}
#seckill .top .p1,
#seckill .bottom .p1 {
  font-size: 18px;
  font-weight: bold;
}
#seckill .top .p2,
#seckill .bottom .p2 {
  font-size: 14px;
  margin-top: 8px;
}
#seckill .top .p3,
#seckill .bottom .p3 {
  width: 80px;
  height: 18px;
  font-size: 14px;
  color: #fff;
  border-radius: 0 10px 10px 0;
  padding-left: 5px;
  box-sizing: border-box;
  margin-top: 5px;
}
#seckill .top {
  background: url(../assets/images/background/small.png) repeat right;
}
#seckill .top .p1,
#seckill .top .p2 {
  color: palevioletred;
}
#seckill .top .p3 {
  background: palevioletred;
}
#seckill .bottom {
  background: url(../assets/images/background/02.png) no-repeat right;
}
#seckill .bottom .p1,
#seckill .bottom .p2 {
  color: plum;
}
#seckill .bottom .p3 {
  background: plum;
}
</style>
